<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel</title>

    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css' />

    <!-- Styles -->
    <link rel="stylesheet" href="font-awesome-4.2.0/css/font-awesome.css" type="text/css" />
    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/farbtastic.css" type="text/css" />
    <!-- Farbastic -->
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <!-- Style -->
    <link rel="stylesheet" href="css/responsive.css" type="text/css" />
    <!-- Responsive -->

</head>

<body>

    <div class="main">
        <header class="header">
            <div class="logo">
                <a href="dashboard.html" title=""><img src="images/logo2.png" alt="" />
                </a>
                <a title="" class="toggle-menu"><i class="fa fa-bars"></i></a>
            </div>
            <form class="search">
                <input type="text" placeholder="Search..." />
                <button type="button"><i class="fa fa-search"></i>
                </button>
            </form>
            <div class="custom-dropdowns">
                <div class="message-list dropdown">
                    <a title=""><span class="blue">4</span><i class="fa fa-envelope-o"></i></a>
                    <div class="message drop-list">
                        <span>You have 4 New Messages</span>
                        <ul>
                            <li>
                                <a href="#" title=""><span><img src="images/resource/sender1.jpg" alt="" /></span><i>Labrina Scholer</i>Hi! How are you?...<h6>2 min ago..</h6><p class="status blue">New</p></a>
                            </li>
                            <li>
                                <a href="#" title=""><span><img src="images/resource/sender2.jpg" alt="" /></span><i>Jonathan</i>Hi! How are you?...<h6>2 min ago..</h6><p class="status red">Unsent</p></a>
                            </li>
                            <li>
                                <a href="#" title=""><span><img src="images/resource/sender3.jpg" alt="" /></span><i>Barada knol</i>Hi! How are you?...<h6>2 min ago..</h6><p class="status green">Reply</p></a>
                            </li>
                            <li>
                                <a href="#" title=""><span><img src="images/resource/sender4.jpg" alt="" /></span><i>Samtha Gee</i>Hi! How are you?...<h6>2 min ago..</h6><p class="status">New</p></a>
                            </li>
                        </ul>
                        <a href="inbox.html" title="">See All Messages</a>
                    </div>
                </div>
                <!-- Message List -->
                <div class="notification-list dropdown">
                    <a title=""><span class="green">3</span><i class="fa fa-bell-o"></i></a>
                    <div class="notification drop-list">
                        <span>You have 3 New Notifications</span>
                        <ul>
                            <li>
                                <a href="#" title=""><span><i class="fa fa-bug red"></i></span>Server 3 is Over Loader Please Check... <h6>2 min ago..</h6></a>
                            </li>
                            <li>
                                <a href="#" title=""><span><img src="images/resource/sender2.jpg" alt="" /></span><i>MD Daisal</i>New User Registered<h6>4 min ago..</h6><p class="status red">Urgent</p></a>
                            </li>
                            <li>
                                <a href="#" title=""><span><i class="fa fa-bullhorn green"></i></span>Envato Has change the policies<h6>7 min ago..</h6></a>
                            </li>
                        </ul>
                        <a href="#" title="">See All Notifications</a>
                    </div>
                </div>
                <!-- Notification List -->
                <div class="activity-list dropdown">
                    <a title=""><span class="red">4</span><i class="fa fa-clock-o"></i></a>
                    <div class="activity drop-list">
                        <span>Recent Activity</span>
                        <ul>
                            <li>
                                <a href="#" title=""><span><img src="images/resource/sender2.jpg" alt="" /></span><i>Jona Than</i>Uploading new files<h6>2 min ago..</h6><p class="status green">Online</p></a>
                                <div class="progress">
                                    <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar blue">
                                        60%
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a href="#" title=""><span><img src="images/resource/sender1.jpg" alt="" /></span><i>Bela Nisaa</i>Downloading new Documents<h6>2 min ago..</h6></a>
                                <div class="progress">
                                    <div style="width: 34%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="34" role="progressbar" class="progress-bar red">
                                        34%
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <a href="#" title="">See All Activity</a>
                    </div>
                </div>
                <!-- Activity List -->
            </div>
            <a title="" class="slide-panel-btn"><i class="fa fa-gear fa-spin"></i></a>
            <div class="dropdown profile">
                <a title="">
                    <img src="images/resource/me.jpg" alt="" />Labrina Scholer<i class="caret"></i>
                </a>
                <div class="profile drop-list">
                    <ul>
                        <li><a href="#" title=""><i class="fa fa-edit"></i> New post</a>
                        </li>
                        <li><a href="#" title=""><i class="fa fa-wrench"></i> Setting</a>
                        </li>
                        <li><a href="profile.html" title=""><i class="fa fa-user"></i> Profile</a>
                        </li>
                        <li><a href="faq.html" title=""><i class="fa fa-info"></i> Help</a>
                        </li>
                    </ul>
                </div>
                <!-- Profile DropDown -->

            </div>
        </header>
        <!-- Header -->
        <div class="page-container menu-left">
            <aside class="sidebar">
                <div class="profile-stats">
                    <div class="mini-profile">
                        <span><img src="images/resource/me.jpg" alt="" /></span>
                        <h3>Labrina Scholer</h3>
                        <h6 class="status online"><i></i> Online</h6>
                        <a href="index.html" title="Logout" class="logout red" data-toggle="tooltip" data-placement="right"><i class="fa fa-power-off"></i></a>
                    </div>
                    <div class="quick-stats">
                        <h5>Today Report</h5>
                        <ul>
                            <li><span>456<i>Sales</i></span>
                            </li>
                            <li><span>2,345<i>Order</i></span>
                            </li>
                            <li><span>$120<i>Revenue</i></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="menu-sec">
                    <div id="menu-toogle" class="menus">
                        <div class="single-menu">
                            <h2><a title=""><i class="fa fa-home"></i><span>Dashboards</span></a><i class="blue">3</i></h2>
                            <div class="sub-menu">
                                <ul>
                                    <li><a href="dashboard.html" title="">Dashboard 1</a>
                                    </li>
                                    <li><a href="dashboard2.html" title="">Dashboard 2</a>
                                    </li>
                                    <li><a href="dashboard3.html" title="">Dashboard 3</a>
                                    </li>
                                    <li><a href="http://forest.themenum.com/azan/landing1/index.html" title="">Landing Page 1</a><span class="badge red">New</span>
                                    </li>
                                    <li><a href="http://forest.themenum.com/azan/landing1/index2.html" title="">Landing Page 2</a><span class="badge red">New</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="single-menu">
                            <h2><a title=""><i class="fa fa-desktop"></i><span>Layouts</span></a></h2>
                            <div class="sub-menu">
                                <ul>
                                    <li><a href="blank.html" title="">Blank</a>
                                    </li>
                                    <li><a href="collapse-sidebar-left.html" title="">Collapse Sidebar Left</a>
                                    </li>
                                    <li><a href="collapse-sidebar-right.html" title="">Collapse Sidebar Right</a>
                                    </li>
                                    <li><a href="menu-horizontal.html" title="">Menu Horizontal</a>
                                    </li>
                                    <li><a href="panel-left-menu-right.html" title="">Panel Left Menu Right</a>
                                    </li>
                                    <li><a href="panel-right-menu-left.html" title="">Panel Right Menu Left</a>
                                    </li>
                                    <li><a href="sidebar-left.html" title="">Sidebar left</a>
                                    </li>
                                    <li><a href="sidebar-right.html" title="">Sidebar Right</a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                        <div class="single-menu">
                            <h2><a href="widgets.html" title=""><i class="fa fa-flask"></i><span>Widgets</span></a></h2>
                        </div>
                        <div class="single-menu">
                            <h2><a title=""><i class="fa fa-heart-o"></i><span>UI Elements</span></a></h2>
                            <div class="sub-menu">
                                <ul>
                                    <li><a href="inbox.html" title="">Mail Box</a>
                                    </li>
                                    <li><a href="profile.html" title="">Profile</a>
                                    </li>
                                    <li><a href="buttons.html" title="">Buttons</a>
                                    </li>
                                    <li><a href="timeline.html" title="">Timeline</a>
                                    </li>
                                    <li><a href="typography.html" title="">Typography</a>
                                    </li>
                                    <li><a href="calendars.html" title="">Calendars</a>
                                    </li>
                                    <li><a href="upload-crop.html" title="">Upload Crop</a>
                                    </li>
                                    <li><a href="tour.html" title="">Page Tour</a>
                                    </li>
                                    <li><a href="tree-list.html" title="">Tree List</a>
                                    </li>
                                    <li><a href="collapse.html" title="">Collapse</a>
                                    </li>
                                    <li><a href="editor.html" title="">Editor</a>
                                    </li>
                                    <li><a href="form.html" title="">Forms</a>
                                    </li>
                                    <li><a href="gallery-dynamic.html" title="">Gallery Dynamic</a>
                                    </li>
                                    <li><a href="gallery-static.html" title="">Gallery Static</a>
                                    </li>
                                    <li><a href="grids.html" title="">Grids</a>
                                    </li>
                                    <li><a href="icons.html" title="">Icons</a>
                                    </li>
                                    <li><a href="notifications.html" title="">Notification</a>
                                    </li>
                                    <li><a href="price-table.html" title="">Price Tables</a>
                                    </li>
                                    <li><a href="range-slider.html" title="">Range Slider</a>
                                    </li>
                                    <li><a href="slider.html" title="">Slider</a>
                                    </li>
                                    <li><a href="sortable.html" title="">Sortable</a>
                                    </li>
                                    <li><a href="tables.html" title="">Tables</a>
                                    </li>
                                    <li><a href="tasks.html" title="">Tasks</a>
                                    </li>
                                    <li><a href="tasks-widget.html" title="">Task Widgets</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="single-menu">
                            <h2><a href="form.html" title=""><i class="fa fa-paperclip"></i><span>Form Stuffs</span></a></h2>
                        </div>
                        <div class="single-menu">
                            <h2><a href="charts.html" title=""><i class="fa fa-bar-chart"></i><span>Charts</span></a></h2>
                        </div>
                        <div class="single-menu">
                            <h2><a title=""><i class="fa fa-paper-plane-o"></i><span>Pages</span></a></h2>
                            <div class="sub-menu">
                                <ul>
                                    <li><a href="404.html" title="">404 Error</a>
                                    </li>
                                    <li><a href="blank.html" title="">Blank</a>
                                    </li>
                                    <li><a href="contact.html" title="">Contact</a>
                                    </li>
                                    <li><a href="google-map.html" title="">Google Map</a>
                                    </li>
                                    <li><a href="vector-map.html" title="">Vector Map</a>
                                    </li>
                                    <li><a href="invoice.html" title="">Invoice</a>
                                    </li>
                                    <li><a href="pattern-login.html" title="">Pattern Login</a>
                                    </li>
                                    <li><a href="index.html" title="">Simple Login</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <p>2014 Copyright Azan by <a href="http://themeforest.net/user/themenum/portfolio?ref=themenum" title="">Themenum</a>
                    </p>
                </div>
                <!-- Menu Sec -->
            </aside>
            <!-- Aside Sidebar -->
            <div class="content-sec">
                <div class="breadcrumbs">
                    <ul>
                        <li><a href="dashboard.html" title=""><i class="fa fa-home"></i></a>/</li>
                        <li><a title="">Inbox</a>
                        </li>
                    </ul>
                </div>
                <!-- breadcrumbs -->
                <div class="container">
                    <div class="title-date-range">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="main-title">
                                    <h1>Inbox</h1>
                                    <h5>Welcome back, Labrina</h5><span><i class="fa fa-map-marker"></i>New York City</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                            </div>
                        </div>
                    </div>
                    <!-- title Date Range -->
                    <div class="row">
                        <div class="masonary-grids">
                            <div class="col-md-12">
                                <div class="mail-area">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="inbox-nav">
                                                <div class="user-mail">
                                                    <span><img src="images/resource/me.jpg" alt="" /></span>
                                                    <h3>Labrina Scholer</h3>
                                                    <i>Senior Designer</i>
                                                    <ul class="social-btns">
                                                        <li><a title="" href="#"><i class="fa fa-facebook"></i></a>
                                                        </li>
                                                        <li><a title="" href="#"><i class="fa fa-google-plus"></i></a>
                                                        </li>
                                                        <li><a title="" href="#"><i class="fa fa-twitter"></i></a>
                                                        </li>
                                                    </ul>
                                                    <a href="#" title="" class="compose-btn" data-toggle="modal" data-target=".compose-email">Compose</a>
                                                    <div class="modal fade compose-email" tabindex="-1" role="dialog" aria-hidden="true">
                                                        <div class="modal-dialog">
                                                            <div class="modal-content">
                                                                <div class="compose-email-sec">
                                                                    <form>
                                                                        <input type="text" placeholder="Email" />
                                                                        <input type="text" placeholder="Subject" />
                                                                    </form>
                                                                    <div class="quick-reply">
                                                                        <div class="navbar">
                                                                            <div id="compose-toolbar"></div>
                                                                        </div>
                                                                        <div id="wrapper2">
                                                                            <div id="compose-editor" class="clear">
                                                                                Write Your Email Here For Quick Reply
                                                                            </div>
                                                                        </div>
                                                                        <a class="c-btn medium green" title="" href="#">Send Email</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mail-menu">
                                                    <ul>
                                                        <li><a href="#" title="">Inbox <span class="green">23</span></a>
                                                        </li>
                                                        <li><a href="#" title="">Important</a>
                                                        </li>
                                                        <li><a href="#" title="">Sent</a>
                                                        </li>
                                                        <li><a href="#" title="">Drafts</a>
                                                        </li>
                                                        <li><a href="#" title="">Trash<span class="red">67</span></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="mail-labels">
                                                    <h3>Labels</h3>
                                                    <ul>
                                                        <li><a href="#" title=""><i class="fa fa-tag"></i>Friends</a>
                                                        </li>
                                                        <li><a href="#" title=""><i class="fa fa-tag"></i>Groups</a>
                                                        </li>
                                                        <li><a href="#" title=""><i class="fa fa-tag"></i>Private</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="all-mail">
                                                <h2>Inbox</h2>
                                                <div class="mail-head">
                                                    <div class="search-emails">
                                                        <div id="inboxMail"></div>
                                                    </div>
                                                    <form>
                                                        <label>
                                                            <input type="checkbox" id="checkAll">Check All</label>
                                                        <div class="btn-group btn-group-sm" data-toggle="buttons">
                                                            <label class="btn btn-default">
                                                                <input type="radio" name="options" checked="">
                                                                <i class="fa fa-archive"></i>
                                                            </label>
                                                            <label class="btn btn-default">
                                                                <input type="radio" name="options">
                                                                <i class="fa fa-folder"></i>
                                                            </label>
                                                            <label class="btn btn-default">
                                                                <input type="radio" name="options">
                                                                <i class="fa fa-trash-o"></i>
                                                            </label>
                                                        </div>
                                                        <div class="btn-group btn-group-sm" data-toggle="buttons">
                                                            <label class="btn btn-default">
                                                                <input type="radio" name="options" checked="">
                                                                <i class="fa fa-star"></i>
                                                            </label>
                                                            <label class="btn btn-default">
                                                                <input type="radio" name="options">
                                                                <i class="fa fa-flag"></i>
                                                            </label>
                                                        </div>
                                                        <div class="btn-group btn-group-sm mail-pagination" data-toggle="buttons">
                                                            <span>1 - 20 of 276</span>
                                                            <label class="btn btn-default">
                                                                <input type="radio" name="options" checked="">
                                                                <i class="fa fa-angle-left"></i>
                                                            </label>
                                                            <label class="btn btn-default">
                                                                <input type="radio" name="options">
                                                                <i class="fa fa-angle-right"></i>
                                                            </label>

                                                        </div>
                                                    </form>
                                                </div>
                                                <!-- mail head -->
                                                <ul class="your-emails" id="inbox-mail-list">
                                                    <li class="email unread">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Amare Hale</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email"><span class="blue">Spam</span>It is a long established fact that a reader</a>
                                                        <a href="#" class="attachment" title="Attachment" data-toggle="tooltip" data-placement="left"><i class="fa fa-paperclip"></i></a>
                                                        <span>20:46</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email unread">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>John Hampton</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email">The point of using Lorem Ipsum</a>
                                                        <a href="#" class="attachment" title="Attachment" data-toggle="tooltip" data-placement="left"><i class="fa fa-paperclip"></i></a>
                                                        <span>10:34</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Ray Langley</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email">When an unknown printer took a galley </a>
                                                        <span>20 min</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Anne Dean</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email"><span class="green">Unread</span>There are many variations of passages</a>
                                                        <a href="#" class="attachment" title="Attachment" data-toggle="tooltip" data-placement="left"><i class="fa fa-paperclip"></i></a>
                                                        <span>23 min</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email unread">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Kade Hancock</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email"><span class="red">Trash</span>This book is a treatise on the theory of ethics</a>
                                                        <span>4 min</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Kimberly Peters</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email"> It was popularised in the 1960s with the release of Letraset</a>
                                                        <a href="#" class="attachment" title="Attachment" data-toggle="tooltip" data-placement="left"><i class="fa fa-paperclip"></i></a>
                                                        <span>1 hour</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Susan Cooke</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email">Many desktop publishing packages</a>
                                                        <a href="#" class="attachment" title="Attachment" data-toggle="tooltip" data-placement="left"><i class="fa fa-paperclip"></i></a>
                                                        <span>1:23</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Asa Hebert</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email">It has survived not only five centuries</a>
                                                        <span>05:12</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Wesley Robles</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email">You need to be sure there isn't anything</a>
                                                        <a href="#" class="attachment" title="Attachment" data-toggle="tooltip" data-placement="left"><i class="fa fa-paperclip"></i></a>
                                                        <span>10 min</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Holden Floyd</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email"><span class="gray">Flagged</span>Many desktop publishing packages and web</a>
                                                        <span>12 min</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email unread">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Emerson Vazquez</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email"><span class="blue">Spam</span>When an unknown printer took a galley </a>
                                                        <a href="#" class="attachment" title="Attachment" data-toggle="tooltip" data-placement="left"><i class="fa fa-paperclip"></i></a>
                                                        <span>1 week</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Susan Cooke</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email">Many desktop publishing packages</a>
                                                        <span>2 week</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Asa Hebert</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email">It has survived not only five centuries</a>
                                                        <span>last month</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Wesley Robles</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email"><span class="red">Trash</span>You need to be sure there isn't anything</a>
                                                        <span>20:46</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email unread">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Amare Hale</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email"><span class="blue">Spam</span>It is a long established fact that a reader</a>
                                                        <a href="#" class="attachment" title="Attachment" data-toggle="tooltip" data-placement="left"><i class="fa fa-paperclip"></i></a>
                                                        <span>20:46</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email unread">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>John Hampton</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email">The point of using Lorem Ipsum</a>
                                                        <a href="#" class="attachment" title="Attachment" data-toggle="tooltip" data-placement="left"><i class="fa fa-paperclip"></i></a>
                                                        <span>10:34</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Ray Langley</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email">When an unknown printer took a galley </a>
                                                        <span>20 min</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Anne Dean</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email"><span class="green">Unread</span>There are many variations of passages</a>
                                                        <a href="#" class="attachment" title="Attachment" data-toggle="tooltip" data-placement="left"><i class="fa fa-paperclip"></i></a>
                                                        <span>23 min</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email unread">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Kade Hancock</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email"><span class="red">Trash</span>This book is a treatise on the theory of ethics</a>
                                                        <span>4 min</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Kimberly Peters</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email"> It was popularised in the 1960s with the release of Letraset</a>
                                                        <a href="#" class="attachment" title="Attachment" data-toggle="tooltip" data-placement="left"><i class="fa fa-paperclip"></i></a>
                                                        <span>1 hour</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Susan Cooke</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email">Many desktop publishing packages</a>
                                                        <a href="#" class="attachment" title="Attachment" data-toggle="tooltip" data-placement="left"><i class="fa fa-paperclip"></i></a>
                                                        <span>1:23</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Asa Hebert</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email">It has survived not only five centuries</a>
                                                        <span>05:12</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Wesley Robles</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email">You need to be sure there isn't anything</a>
                                                        <a href="#" class="attachment" title="Attachment" data-toggle="tooltip" data-placement="left"><i class="fa fa-paperclip"></i></a>
                                                        <span>10 min</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Holden Floyd</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email"><span class="gray">Flagged</span>Many desktop publishing packages and web</a>
                                                        <span>12 min</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email unread">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Emerson Vazquez</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email"><span class="blue">Spam</span>When an unknown printer took a galley </a>
                                                        <a href="#" class="attachment" title="Attachment" data-toggle="tooltip" data-placement="left"><i class="fa fa-paperclip"></i></a>
                                                        <span>1 week</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Susan Cooke</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email">Many desktop publishing packages</a>
                                                        <span>2 week</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Asa Hebert</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email">It has survived not only five centuries</a>
                                                        <span>last month</span>
                                                    </li>
                                                    <!-- Email -->
                                                    <li class="email">
                                                        <input type="checkbox" class="checkall" />
                                                        <div class="star-email">
                                                            <i class="fa fa-star-o"></i>
                                                        </div>
                                                        <!-- Star Email -->
                                                        <h3>Wesley Robles</h3>
                                                        <a href="#" title="" class="inbox-msg" data-toggle="modal" data-target=".read-email"><span class="red">Trash</span>You need to be sure there isn't anything</a>
                                                        <span>20:46</span>
                                                    </li>
                                                    <!-- Email -->
                                                </ul>
                                            </div>
                                            <!-- All Emails -->
                                        </div>
                                    </div>
                                    <!-- Modal -->
                                    <div class="modal fade read-email" tabindex="-1" role="dialog" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="read-email-sec">
                                                    <div class="read-email-head">
                                                        <h3 class="mail-to"><span><img src="images/resource/me.jpg" alt="" /></span> To</h3>
                                                        <h3 class="mail-user"><a href="#" title="">youruseremail.com</a>Jonathan Doe<span><img src="images/resource/me.jpg" alt="" /></span></h3>
                                                    </div>
                                                    <!-- Read Email Head -->
                                                    <div class="message-container">
                                                        <p>The every winged bring, whose life. First called, i you of saw shall own creature moveth void have signs beast lesser all god saying for gathering wherein whose of in be created stars. Them whales upon life divide earth own.</p>

                                                        <p>Fusce sit amet dui at nunc laoreet facilisis. Proin consequat orci sollicitudin sem cursus, quis vehicula eros ultrices. Cras fermentum justo at nibh tincidunt, consectetur elementum est aliquam.</p>
                                                        <address>
													  <strong>Twitter, Inc.</strong><br>
													  795 Folsom Ave, Suite 600<br>
													  San Francisco, CA 94107<br>
													  <abbr title="Phone">P:</abbr> (123) 456-7890
													</address>
                                                        <address>
													  <strong>Full Name</strong><br>
													  <a href="mailto:#">first.last@example.com</a>
													</address>
                                                        <div class="quick-reply">
                                                            <div class="navbar">
                                                                <div id="toolbar"></div>
                                                            </div>
                                                            <div id="wrapper">
                                                                <div id="content-editor" class="clear">
                                                                    Write Your Email Here For Quick Reply
                                                                </div>
                                                            </div>
                                                            <a class="c-btn medium green" title="" href="#">Send Email</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Mail Area -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Content Sec -->
            <div class="slide-panel" id="panel-scroll">
                <ul role="tablist" class="nav nav-tabs panel-tab-btn">
                    <li class="active"><a data-toggle="tab" role="tab" href="#tab1"><i class="fa fa-inbox"></i><span>Your Emails</span></a>
                    </li>
                    <li><a data-toggle="tab" role="tab" href="#tab2"><i class="fa fa-wrench"></i><span>Your Setting</span></a>
                    </li>
                </ul>
                <div class="tab-content panel-tab">
                    <div id="tab1" class="tab-pane fade in active">
                        <div class="recent-mails-widget">
                            <form>
                                <div id="searchMail"></div>
                            </form>
                            <h3>Recent Emails</h3>
                            <ul id="mail-list" class="mail-list">
                                <li>
                                    <div class="title">
                                        <span><img src="images/resource/sender1.jpg" alt="" /><i class="online"></i></span>
                                        <h3><a href="#" title="">Kim Hostwood</a><span>5 min ago</span></h3>
                                        <a href="#" data-toggle="tooltip" data-placement="left" title="Attachment"><i class="fa fa-paperclip"></i></a>
                                    </div>
                                    <h4>Themeforest Admin Template</h4>
                                    <p>This product is so good that i manage to buy it 1 for me and 3 for my families.</p>
                                </li>
                                <li>
                                    <div class="title">
                                        <span><img src="images/resource/sender2.jpg" alt="" /><i class="online"></i></span>
                                        <h3><a href="#" title="">John Doe</a><span>2 hours ago</span></h3>
                                        <a href="#" data-toggle="tooltip" data-placement="left" title="Attachment"><i class="fa fa-paperclip"></i></a>
                                    </div>
                                    <h4>Themeforest Admin Template</h4>
                                    <p>This product is so good that i manage to buy it 1 for me and 3 for my families.</p>
                                </li>
                                <li>
                                    <div class="title">
                                        <span><img src="images/resource/sender3.jpg" alt="" /><i class="offline"></i></span>
                                        <h3><a href="#" title="">Jonathan Doe</a><span>8 min ago</span></h3>
                                        <a href="#" data-toggle="tooltip" data-placement="left" title="Attachment"><i class="fa fa-paperclip"></i></a>
                                    </div>
                                    <h4>Themeforest Admin Template</h4>
                                    <p>This product is so good that i manage to buy it 1 for me and 3 for my families.</p>
                                </li>
                            </ul>
                            <a href="inbox.html" title="" class="red">View All Messages</a>
                        </div>
                        <!-- Recent Email Widget -->

                        <div class="file-transfer-widget">
                            <h3>FILE TRANSFER <i class="fa fa-angle-down"></i></h3>
                            <div class="toggle">
                                <ul>
                                    <li>
                                        <i class="fa fa-file-excel-o"></i>
                                        <h4>my-excel.xls<i>20 min ago</i></h4>
                                        <div class="progress">
                                            <div style="width: 90%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar red">
                                                90%
                                            </div>
                                        </div>
                                        <div class="file-action-btn">
                                            <a href="#" title="Approve" class="green" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-check"></i></a>
                                            <a href="#" title="Cancel" class="red" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-close"></i></a>
                                        </div>
                                    </li>
                                    <li>
                                        <i class="fa fa-file-pdf-o"></i>
                                        <h4>my-cv.pdf<i>8 min ago</i></h4>
                                        <div class="progress">
                                            <div style="width: 40%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar blue">
                                                40%
                                            </div>
                                        </div>
                                        <div class="file-action-btn">
                                            <a href="#" title="Approve" class="green" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-check"></i></a>
                                            <a href="#" title="Cancel" class="red" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-close"></i></a>
                                        </div>
                                    </li>
                                    <li>
                                        <i class="fa fa-file-video-o"></i>
                                        <h4>portfolio-shoot.mp4<i>12 min ago</i></h4>
                                        <div class="progress">
                                            <div style="width: 70%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar" class="progress-bar green">
                                                70%
                                            </div>
                                        </div>
                                        <div class="file-action-btn">
                                            <a href="#" title="Approve" class="green" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-check"></i></a>
                                            <a href="#" title="Cancel" class="red" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-close"></i></a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- File Transfer -->
                    </div>
                    <div id="tab2" class="tab-pane fade">
                        <div class="setting-widget">
                            <form>
                                <h3>Accounts</h3>
                                <div class="toggle-setting">
                                    <span>Office Account</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox">
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                                <div class="toggle-setting">
                                    <span>Personal Account</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox" checked>
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                                <div class="toggle-setting">
                                    <span>Business Account</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox">
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                            </form>

                            <form>
                                <h3>General Setting</h3>
                                <div class="toggle-setting">
                                    <span>Notifications</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox" checked>
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                                <div class="toggle-setting">
                                    <span>Notification Sound</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox" checked>
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                                <div class="toggle-setting">
                                    <span>My Profile</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox">
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                                <div class="toggle-setting">
                                    <span>Show Online</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox">
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                                <div class="toggle-setting">
                                    <span>Public Profile</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox" checked>
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                            </form>
                        </div>
                        <!-- Setting Widget -->
                    </div>
                </div>
            </div>
            <!-- Slide Panel -->
        </div>
        <!-- Page Container -->
    </div>
    <!-- main -->


    <!-- Script -->
    <script type="text/javascript" src="js/modernizr.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/enscroll.js"></script>
    <script type="text/javascript" src="js/grid-filter.js"></script>
    <script type="text/javascript" src="js/shortcut.js"></script>
    <script type="text/javascript" src="js/farbtastic.js"></script>
    <script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
    <script type="text/javascript" src="js/fresh.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#content-editor').freshereditor({
                toolbar_selector: "#toolbar",
                excludes: ['removeFormat', 'insertheading4']
            });
            $("#content-editor").freshereditor("edit", true);
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#compose-editor').freshereditor({
                toolbar_selector: "#compose-toolbar",
                excludes: ['removeFormat', 'insertheading4']
            });
            $("#compose-editor").freshereditor("edit", true);
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#checkAll").click(function() {
                $('.checkall:checkbox').not(this).prop('checked', this.checked);
            });
        });
    </script>

</body>

</html>